<!-- eslint-disable vue/no-side-effects-in-computed-properties -->
<!--  npm run serve -->


<template>
  <div id="app">

    <div class="contain">
      <!-- 左侧列表 -->
      <div class="list-box">

        <!-- 添加资产 -->
        <form class="my-form">
          <input type="text" class="form-control" placeholder="消费名称" v-model="newItem.name" />
          <input type="text" class="form-control" placeholder="消费价格" v-model="newItem.price" @keyup.enter="add" />

          <button type="button" class="btn btn-primary" @click="add()">添加账单</button>

        </form>

        <table class="table table-hover">
          <thead>
            <tr>
              <th>编号</th>

              <th>消费名称</th>

              <th>消费价格</th>

              <th>作者</th>
              <th>操作</th>


            </tr>

          </thead>

          <tbody>
            <tr v-for="(item) in list" :key="item.id">
              <td>{{ item.id }}</td>

              <td>{{ item.name }}</td>

              <td>{{ item.price }}</td>

              <td>{{ item.creator }}</td>
              <td><a href="" @click.prevent @click="delData(item.id)">删除</a></td>

            </tr>



          </tbody>

          <tfoot>
            <tr>
              <td colspan="4">
                <p v-if="list.length === 0">请添加商品哦亲</p>
                <p v-else>消费总计：{{ GoodTotal.Sum }}</p>
              </td>

              <button class="btn btn-primary" @click="DELALL()"> 全部删除</button>
            </tr>

          </tfoot>

        </table>

      </div>


    </div>

  </div>
</template>

<script>
import axios from "axios";

export default {

  data() {

    return {
      list: [],
      newItem: {
        name: '',
        price: ''
      },
      GoodTotal: {
        Sum: 0,
      }


    };


  },
  async created() {

    this.GETItem();
    this.GoodTotalIN();



    // 页面加载时，计算商品总价




  },
  async updated() {
    this.GETItem();
    this.GoodTotalIN();

    // 页面更新时，计算商品总价




  },


  methods: {


    async add() {

      if (!this.newItem.name || !this.newItem.price) {
        alert("消费名称或价格不能为空");
        return;
      }

      await axios.post("https://applet-base-api-t.itheima.net/bill", {
        creator: "family",
        name: this.newItem.name,
        price: parseFloat(this.newItem.price)
      });
      this.newItem.name = '';
      this.newItem.price = '';
      await this.GETItem();

    },
    async delData(id) {


      await axios.delete("https://applet-base-api-t.itheima.net/bill/" + id);
      await this.GETItem();



    },
    DELALL() {

      if (this.list.length == 0) {
        alert('当前列表为空，无法删除')
        return

      }
      if (!confirm('是否要删除当前数据')) {
        //当用户点击的取消按钮的时候，应该阻断这个方法中的后面代码的继续执行
        return
      }

      this.list = [];


    },
    // 商品总价


    async GETItem() {
      const res = await axios.get(
        "https://applet-base-api-t.itheima.net/bill",
        {
          params: {
            creator: "family",
          },
        }
      );
      console.log("res  ----->  ", res);
      this.list = res.data.data;


    },

    GoodTotalIN() {


      this.GoodTotal.Sum = this.list.reduce((pre, item) => {
        return pre + item.price;
      }, 0);


      return this.GoodTotal;



    },





  },

}

</script>

<style src="../src/Css/Shop.css"></style>

<!--npm run serve-->
